<template>
  <div>
    <div class="fill"></div>
    <div class="input_item">
      <Input v-model="title" size="large" placeholder="请输入博客标题" clearable show-word-limit maxlength="30" style="width: 80%"/>
      <Button type="success" size="large" icon="md-checkbox-outline" @click="submitHandle">发表博客</Button>
    </div>
    <div class="tags">
      <p>添加标签</p>
      <Divider/>
      <Tag checkable :checked="false" color="success" :name="item.val" v-for="(item,index) in tags_tec"
           @on-change="tag_select" :key="index">
        {{item.name}}
      </Tag>
      <Divider/>
    </div>

    <div class="editor_div" id="editor">

    </div>

  </div>
</template>

<script>
  import E from 'wangeditor'

  var editor;
  export default {
    name: "write",
    data: () => ({
      title: '',
      tags_tec: [
        {name: '前端', val: 't1'},
        {name: 'JAVA', val: 't2'},
        {name: 'SQL', val: 't3'},
        {name: 'PHP', val: 't4'},
        {name: '安卓', val: 't7'},
        {name: 'IOS', val: 't8'},
        {name: '其他', val: 't9'},
        {name: 'UI', val: 't5'},
        {name: '移动端', val: 't6'},
        {name: '大数据', val: 't10'},
        {name: 'AI', val: 't11'}
      ],
      tag_sel: []
    }),
    mounted() {
      editor = new E('#editor')
      editor.create()
    },
    methods: {
      tag_select(event, name) {
        if (event) {
          this.tag_sel.push(name)
        } else {
          let index = this.tag_sel.indexOf(name);
          this.tag_sel.splice(index, 1)
        }
      },
      submitHandle() {
        if (this.title == '' || this.title.length == 0) {
          this.$Message.error('文章标题不能为空');
          return false;
        }
        if (this.tag_sel.length === 0) {
          this.$Message.error('最少选择一个标签');
          return false;
        }
        let params = {"title": this.title, "tags": this.tag_sel.join(","), "content": editor.txt.html()}
        alert(JSON.stringify(params))
      }
    }
  }
</script>

<style scoped>
  .fill {
    width: 1px;
    height: 1px;
  }

  .editor_div {
    width: 90%;
    margin: 20px auto;
  }

  .input_item {
    width: 90%;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
  }

  .tags {
    width: 90%;
    margin: 0 auto;
    max-height: 300px;
    overflow-y: auto;
  }
</style>
